import Taro, { redirectTo, setNavigationBarTitle, navigateTo, switchTab } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import { AtIcon, AtForm, AtButton, AtSteps } from 'taro-ui'
import React, { useState, useEffect } from 'react'

import api from '../../../utils/api'
import request from '../../../utils/request'

import './step1.less'

function AuthSteps(props) {
  useEffect(() => {
  }, [])
  const [statusItems, setStatusItems] = useState([
    { 'title': '实名认证', status: 'success' },
    { 'title': '上传身份证', status: 'success' },
    { 'title': '接受任务', status: 'success' },
    { 'title': '确认协议' }
  ])
  const [currentStep, setCurrentStep] = useState(2)

  const previewDoc = (type) => {
    let url = ''
    if (type === 'hetong') {
      url = api.imgHost + '/uploads/template/hetong.pdf'
    } else {
      url = api.imgHost + '/uploads/template/weituoshu.pdf'
    }
    Taro.showLoading({
      title: '加载中'
    })
    Taro.downloadFile({
      url: url,
      success: function (res) {
        let Path = res.tempFilePath              //返回的文件临时地址，用于后面打开本地预览所用
        Taro.hideLoading()
        Taro.openDocument({
          filePath: Path,
          fileType: 'pdf',
          success: function (res) {
          }
        })
      },
      fail: function (res) {
        console.log(res);
      }
    })
  }
  const onSubmit = () => {
    Taro.showLoading({
      title: '加载中'
    })
    request(api.updateUserProtocol, 'POST').then((data) => {
      Taro.hideLoading()
      switchTab({
        url: '/pages/mine/mine'
      })
    })
  }
  return (
    <View className='ca'>
      <View className='layout'>
        <View className='bg'></View>
        <View className='top'></View>
        <View className='cell-group group'>
          <View className="step">
            <AtSteps
              items={statusItems}
              current={currentStep}
            />
            <View className="btn-row">
              <AtButton className='btn' type='secondary' onClick={previewDoc.bind(this, 'hetong')}>查看合同</AtButton>
              <AtButton className='btn' type='secondary' onClick={previewDoc.bind(this, 'weituo')}>查看委托书</AtButton>
            </View>
          </View>
        </View>
        <AtButton className='btn' circle type='primary' onClick={onSubmit}>接受协议</AtButton>
      </View>
    </View>
  )
}

export default AuthSteps
